<template>
  <div class="hello">
    <!-- <h1>{{ msg }}</h1>
    <h1>{{ msg1 }}</h1>
    <router-link to="/Apple"><el-button>apple</el-button></router-link>
    <router-link to="/Banana"><el-button>banana</el-button></router-link>
    <router-view/> -->
    <!-- <keep-alive>https://www.cnblogs.com/xuewuhen/p/7860701.html -->
    <el-container>
      <el-aside>
        <el-header class="navbar-brand header">
          <i class="el-icon-share"/>
          <span v-if="!isCollapse">DYLAN</span>
        </el-header>
        <el-menu :default-active="this.$route.name" :default-openeds="['1']" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" background-color="#00142a" text-color="green" active-text-color="red">
          <el-submenu v-for="item in allRouter" :key="item.meta.index" :index="item.meta.index">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <router-link v-for="val in item.children" :to="val.path" :key="val.path"><el-menu-item :index="val.path"><i class="el-icon-location"></i>{{ val.meta.title }}</el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <!-- <el-menu :default-active="this.$route.name" :default-openeds="['1']" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" background-color="#00142a" text-color="green" active-text-color="red">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">导航一</span>
            </template>
            <el-menu-item-group>
              <router-link to="/fruit/Apple"><el-menu-item index="fruit/apple">apple</el-menu-item></router-link>
              <router-link to="/fruit/Banana"><el-menu-item index="fruit/banana">Banana</el-menu-item></router-link>
              <router-link to="/fruit/Origin"><el-menu-item index="fruit/origin">Origin</el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">导航二</span>
            </template>
            <el-menu-item-group>
              <router-link to="/fruit/Pear"><el-menu-item index="fruit/pear">Pear</el-menu-item></router-link>
              <router-link to="/fruit/Pineapple"><el-menu-item index="fruit/pineapple">Pineapple</el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">导航三</span>
            </template>
            <el-menu-item-group>
              <router-link to="/fruit/Litchi"><el-menu-item index="fruit/litchi">Litchi</el-menu-item></router-link>
              <router-link to="/fruit/customize"><el-menu-item index="fruit/customize">自定义组件</el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu> -->
      </el-aside>
      <el-container class="mainContent">
        <el-header>
          <span @click="isCollapsen"><i class="el-icon-setting"/></span>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>Welcome to Dylan</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'home',
  // 组件内钩子
  beforeRouteEnter (to, from, next) {
    // console.log('home before enter')
    next()
  },
  beforeRouteUpdate (to, from, next) { // 4.2
    console.log('home update enter')
    next()
  },
  beforeRouteLeave (to, from, next) {
    // console.log('home leave enter')
    next()
  },
  computed: {
    allRouter () {
      let r = this.$router.options.routes.filter((item, index) => {
        return index > 1
      })
      return r
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js Home',
      msg1: '欢迎Dylan',
      isCollapse: false
    }
  },
  mounted () { // 作为数据初始化的获取，相同类似的路径下，显示同一个组件（home123~home/456）。第二次进入路由mounted不会触发，即数据不会更新.用beforeRouteUpdate
    console.log(this.$route.query.id)
    console.log(this.$router)
    console.log(this.$router.options)
    // this.highRoute = this.$store.state.highRouting
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    isCollapsen () {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  height: 100%
}
.el-container {
  height: 100%
}
.el-header, .el-footer {
  line-height: 60px;
}
/deep/ .el-aside {
  width: auto!important; /* <el-aside>不知道为啥默认是300px，布局乱了 */
  .el-header {
    background-color: rgb(0,34,64);
    span {
      color: white
    }
  }
  ul {
    height: calc(100% - 60px);
    overflow-y: auto;
    overflow-x: hidden
  }
}
.mainContent {
  .el-header {
    padding: 0;
    span {
      padding: 0 20px;
      cursor: pointer;
    }
  }
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}
.el-container .el-aside {
  line-height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-footer {
  text-align: center;
}
</style>
